<template>
  <div class="flex flex-col text-white">
    <div class="p-2 text-center bg-weathers">
      你正在预览{{ cityName }}的天气信息<span v-if="show">，可以通过右上角的"+"号按钮保存起来</span
      >
    </div>
    <div
      class="container flex flex-col text-center mt-6 gap-4"
      v-for="(item, index) in nowWeather"
      :key="index"
    >
      <h1>当日气温是: {{ item.temperature }}摄氏度</h1>
      <h1>当日天气是：{{ item.weather }}</h1>
      <h1>当日风向是：{{ item.winddirection }}风</h1>
      <h1>当日风力是: {{ item.windpower }}级</h1>
    </div>
    <hr class="border-white border-opacity-10 mt-6" />
    <div class="moreweather container">
      <div class="bg-weathers px-12 pt-10 mt-2 rounded">
        <div class="flex gap-6">
          <div
            class="flex flex-col flex-1 text-center gap-4"
            v-for="(item, index) in allWeather"
            :key="index"
          >
            <span>{{ item.week }}</span
            ><span
              >{{ item.date.split('-')[1] }}-{{ item.date.split('-')[2] }}</span
            ><span>{{ item.dayweather }}</span
            ><span>风力 {{ item.daypower }}级</span>
          </div>
        </div>
        <div class="h-40 mt-10">
          <v-chart :option="option" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
export default {
  data() {
    return {
      option: {},
      cityAdcode: '',
      cityName: '',
      nowWeather: [],
      allWeather: [],
      weekDay: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      daytemp:[],
      nighttemp:[],
      show: true,
    };
  },
  methods: {
    initChart(data1,data2) {
      this.option = {
        xAxis: {
          type: 'category',
          show: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu'],
        },
        yAxis: {
          type: 'value',
          show: false,
        },
    
        legend: {
          show: false,
        },
        series: [
          {
            data:data1,
            type: 'line',
            smooth: true,
            label: {
              show: 'true',
              position: 'top',
              color: '#fff',
              formatter:function(data){
                return '白'+ data.value+'°C'
              },
            },
          },
          {
            data: data2,
            type: 'line',
            smooth: true,
            label: {
              show: 'true',
              position: 'bottom',
              color: '#fff',
              formatter:function(data){
                return '晚'+ data.value+'°C'
              },
            },
          },
        ],
      };
    },
    searchAdcode(adcode) {
      const url = `https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=a9f817f97dc77012f714e1534dd24fb1&extensions=base`;
      axios.get(url).then((res) => {
        this.nowWeather.push(res.data.lives[0]);
        console.log(this.nowWeather[0]);
      });
    },
    searchAllWeather(adcode) {
      const url = `https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=a9f817f97dc77012f714e1534dd24fb1&extensions=all`;
      axios.get(url).then((res) => {
        const res1 = res.data.forecasts[0].casts;
        res1.forEach((items) => {
         
          const day = new Date();
          const index = day.getDay();
          console.log(items.week)
          console.log(index)
          if (Number(items.week) === index) {
            items.week = '今天';
          } else if (Number(items.week) === index + 1) {
            items.week = '明天';
          }else if(Number(items.week) === 7){
            items.week = '周日'
          }
           else {
            items.week = this.weekDay[Number(items.week)];
          }
          this.allWeather.push(items)
          this.daytemp.push(items.daytemp)
          this.nighttemp.push(items.nighttemp)
        });  
        Vue.delete(this.daytemp, '__ob__')
        Vue.delete(this.nighttemp, '__ob__')
        console.log(this.allWeather)
        console.log(this.daytemp) 
        console.log(this.nighttemp)   
      });     
    },
  },

  async mounted() {
    this.show=true
    this.initChart(this.daytemp,this.nighttemp);
    const src = decodeURI(window.location.href);
    this.cityName = src.split('=')[1]
    console.log(this.cityName,'222')
    const key = localStorage.getItem(this.cityName)
    if(key!==null){
      this.show=false
    }
    console.log(this.show,'123')
    this.cityAdcode = window.location.href.split('weather/')[1].split('?')[0];
    this.searchAdcode(this.cityAdcode);
    this.searchAllWeather(this.cityAdcode);   
  },
};
</script>
